/** @preserve
 jSignature v2 "${buildDate}" "${commitID}"
 Copyright (c) 2012 Willow Systems Corp http://willow-systems.com
 Copyright (c) 2010 Brinley Ang http://www.unbolt.net
 MIT License <http://www.opensource.org/licenses/mit-license.php>

 */
;(function () {

    var apinamespace = 'jSignature'

    /**
     Allows one to delay certain eventual action by setting up a timer for it and allowing one to delay it
     by "kick"ing it. Sorta like "kick the can down the road"

     @public
     @class
     @param
     @returns {Type}
     */
    var KickTimerClass = function (time, callback) {
        var timer;
        this.kick = function () {
            clearTimeout(timer);
            timer = setTimeout(
                callback
                , time
            );
        }
        this.clear = function () {
            clearTimeout(timer);
        }
        return this;
    }

    var PubSubClass = function (context) {
        'use strict'
        /*  @preserve
        -----------------------------------------------------------------------------------------------
        JavaScript PubSub library
        2012 (c) Willow Systems Corp (www.willow-systems.com)
        based on Peter Higgins (dante@dojotoolkit.org)
        Loosely based on Dojo publish/subscribe API, limited in scope. Rewritten blindly.
        Original is (c) Dojo Foundation 2004-2010. Released under either AFL or new BSD, see:
        http://dojofoundation.org/license for more information.
        -----------------------------------------------------------------------------------------------
        */
        this.topics = {};
        // here we choose what will be "this" for the called events.
        // if context is defined, it's context. Else, 'this' is this instance of PubSub
        this.context = context ? context : this;
        /**
         * Allows caller to emit an event and pass arguments to event listeners.
         * @public
         * @function
         * @param topic {String} Name of the channel on which to voice this event
         * @param **arguments Any number of arguments you want to pass to the listeners of this event.
         */
        this.publish = function (topic, arg1, arg2, etc) {
            'use strict'
            if (this.topics[topic]) {
                var currentTopic = this.topics[topic]
                    , args = Array.prototype.slice.call(arguments, 1)
                    , toremove = []
                    , torun = []
                    , fn
                    , i, l
                    , pair;

                for (i = 0, l = currentTopic.length; i < l; i++) {
                    pair = currentTopic[i]; // this is a [function, once_flag] array
                    fn = pair[0];
                    if (pair[1] /* 'run once' flag set */) {
                        pair[0] = function () {
                        };
                        toremove.push(i);
                    }
                    /* don't call the callback right now, it might decide to add or
                     * remove subscribers which will wreak havoc on our index-based
                     * iteration */
                    torun.push(fn);
                }
                for (i = 0, l = toremove.length; i < l; i++) {
                    currentTopic.splice(toremove[i], 1);
                }
                for (i = 0, l = torun.length; i < l; i++) {
                    torun[i].apply(this.context, args);
                }
            }
        }
        /**
         * Allows listener code to subscribe to channel and be called when data is available
         * @public
         * @function
         * @param topic {String} Name of the channel on which to voice this event
         * @param callback {Function} Executable (function pointer) that will be ran when event is voiced on this channel.
         * @param once {Boolean} (optional. False by default) Flag indicating if the function is to be triggered only once.
         * @returns {Object} A token object that cen be used for unsubscribing.
         */
        this.subscribe = function (topic, callback, once) {
            'use strict'
            if (!this.topics[topic]) {
                this.topics[topic] = [[callback, once]];
            } else {
                this.topics[topic].push([callback, once]);
            }
            return {
                "topic": topic,
                "callback": callback
            };
        };
        /**
         * Allows listener code to unsubscribe from a channel
         * @public
         * @function
         * @param token {Object} A token object that was returned by `subscribe` method
         */
        this.unsubscribe = function (token) {
            if (this.topics[token.topic]) {
                var currentTopic = this.topics[token.topic];

                for (var i = 0, l = currentTopic.length; i < l; i++) {
                    if (currentTopic[i] && currentTopic[i][0] === token.callback) {
                        currentTopic.splice(i, 1);
                    }
                }
            }
        }
    }

/// Returns front, back and "decor" colors derived from element (as jQuery obj)
    function getColors($e) {
        var tmp
            , undef
            , frontcolor = $e.css('color')
            , backcolor
            , e = $e[0];

        var toOfDOM = false;
        while (e && !backcolor && !toOfDOM) {
            try {
                tmp = $(e).css('background-color');
            } catch (ex) {
                tmp = 'transparent';
            }
            if (tmp !== 'transparent' && tmp !== 'rgba(0, 0, 0, 0)') {
                backcolor = tmp;
            }
            toOfDOM = e.body;
            e = e.parentNode;
        }

        var rgbaregex = /rgb[a]*\((\d+),\s*(\d+),\s*(\d+)/ // modern browsers
            , hexregex = /#([AaBbCcDdEeFf\d]{2})([AaBbCcDdEeFf\d]{2})([AaBbCcDdEeFf\d]{2})/ // IE 8 and less.
            , frontcolorcomponents;

        // Decomposing Front color into R, G, B ints
        tmp = undef;
        tmp = frontcolor.match(rgbaregex);
        if (tmp) {
            frontcolorcomponents = {'r': parseInt(tmp[1], 10), 'g': parseInt(tmp[2], 10), 'b': parseInt(tmp[3], 10)};
        } else {
            tmp = frontcolor.match(hexregex);
            if (tmp) {
                frontcolorcomponents = {
                    'r': parseInt(tmp[1], 16),
                    'g': parseInt(tmp[2], 16),
                    'b': parseInt(tmp[3], 16)
                };
            }
        }
//		if(!frontcolorcomponents){
//			frontcolorcomponents = {'r':255,'g':255,'b':255}
//		}

        var backcolorcomponents
        // Decomposing back color into R, G, B ints
        if (!backcolor) {
            // HIghly unlikely since this means that no background styling was applied to any element from here to top of dom.
            // we'll pick up back color from front color
            if (frontcolorcomponents) {
                if (Math.max.apply(null, [frontcolorcomponents.r, frontcolorcomponents.g, frontcolorcomponents.b]) > 127) {
                    backcolorcomponents = {'r': 0, 'g': 0, 'b': 0};
                } else {
                    backcolorcomponents = {'r': 255, 'g': 255, 'b': 255};
                }
            } else {
                // arg!!! front color is in format we don't understand (hsl, named colors)
                // Let's just go with white background.
                backcolorcomponents = {'r': 255, 'g': 255, 'b': 255};
            }
        } else {
            tmp = undef;
            tmp = backcolor.match(rgbaregex);
            if (tmp) {
                backcolorcomponents = {'r': parseInt(tmp[1], 10), 'g': parseInt(tmp[2], 10), 'b': parseInt(tmp[3], 10)};
            } else {
                tmp = backcolor.match(hexregex);
                if (tmp) {
                    backcolorcomponents = {
                        'r': parseInt(tmp[1], 16),
                        'g': parseInt(tmp[2], 16),
                        'b': parseInt(tmp[3], 16)
                    };
                }
            }
//			if(!backcolorcomponents){
//				backcolorcomponents = {'r':0,'g':0,'b':0}
//			}
        }

        // Deriving Decor color
        // THis is LAZY!!!! Better way would be to use HSL and adjust luminocity. However, that could be an overkill.

        var toRGBfn = function (o) {
            return 'rgb(' + [o.r, o.g, o.b].join(', ') + ')'
        }
            , decorcolorcomponents
            , frontcolorbrightness
            , adjusted;

        if (frontcolorcomponents && backcolorcomponents) {
            var backcolorbrightness = Math.max.apply(null, [frontcolorcomponents.r, frontcolorcomponents.g, frontcolorcomponents.b]);

            frontcolorbrightness = Math.max.apply(null, [backcolorcomponents.r, backcolorcomponents.g, backcolorcomponents.b]);
            adjusted = Math.round(frontcolorbrightness + (-1 * (frontcolorbrightness - backcolorbrightness) * 0.75)); // "dimming" the difference between pen and back.
            decorcolorcomponents = {'r': adjusted, 'g': adjusted, 'b': adjusted}; // always shade of gray
        } else if (frontcolorcomponents) {
            frontcolorbrightness = Math.max.apply(null, [frontcolorcomponents.r, frontcolorcomponents.g, frontcolorcomponents.b]);
            var polarity = +1;
            if (frontcolorbrightness > 127) {
                polarity = -1;
            }
            // shifting by 25% (64 points on RGB scale)
            adjusted = Math.round(frontcolorbrightness + (polarity * 96)); // "dimming" the pen's color by 75% to get decor color.
            decorcolorcomponents = {'r': adjusted, 'g': adjusted, 'b': adjusted}; // always shade of gray
        } else {
            decorcolorcomponents = {'r': 191, 'g': 191, 'b': 191}; // always shade of gray
        }

        return {
            'color': frontcolor
            , 'background-color': backcolorcomponents ? toRGBfn(backcolorcomponents) : backcolor
            , 'decor-color': toRGBfn(decorcolorcomponents)
        };
    }

    function Vector(x, y) {
        this.x = x;
        this.y = y;
        this.reverse = function () {
            return new this.constructor(
                this.x * -1
                , this.y * -1
            );
        };
        this._length = null;
        this.getLength = function () {
            if (!this._length) {
                this._length = Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
            }
            return this._length;
        };

        var polarity = function (e) {
            return Math.round(e / Math.abs(e));
        };
        this.resizeTo = function (length) {
            // proportionally changes x,y such that the hypotenuse (vector length) is = new length
            if (this.x === 0 && this.y === 0) {
                this._length = 0;
            } else if (this.x === 0) {
                this._length = length;
                this.y = length * polarity(this.y);
            } else if (this.y === 0) {
                this._length = length;
                this.x = length * polarity(this.x);
            } else {
                var proportion = Math.abs(this.y / this.x)
                    , x = Math.sqrt(Math.pow(length, 2) / (1 + Math.pow(proportion, 2)))
                    , y = proportion * x;
                this._length = length;
                this.x = x * polarity(this.x);
                this.y = y * polarity(this.y);
            }
            return this;
        };

        /**
         * Calculates the angle between 'this' vector and another.
         * @public
         * @function
         * @returns {Number} The angle between the two vectors as measured in PI.
         */
        this.angleTo = function (vectorB) {
            var divisor = this.getLength() * vectorB.getLength();
            if (divisor === 0) {
                return 0;
            } else {
                // JavaScript floating point math is screwed up.
                // because of it, the core of the formula can, on occasion, have values
                // over 1.0 and below -1.0.
                return Math.acos(
                    Math.min(
                        Math.max(
                            (this.x * vectorB.x + this.y * vectorB.y) / divisor
                            , -1.0
                        )
                        , 1.0
                    )
                ) / Math.PI;
            }
        };
    }

    function Point(x, y) {
        this.x = x;
        this.y = y;

        this.getVectorToCoordinates = function (x, y) {
            return new Vector(x - this.x, y - this.y);
        };
        this.getVectorFromCoordinates = function (x, y) {
            return this.getVectorToCoordinates(x, y).reverse();
        };
        this.getVectorToPoint = function (point) {
            return new Vector(point.x - this.x, point.y - this.y);
        };
        this.getVectorFromPoint = function (point) {
            return this.getVectorToPoint(point).reverse();
        };
    }

    /*
     * About data structure:
     * We don't store / deal with "pictures" this signature capture code captures "vectors"
     *
     * We don't store bitmaps. We store "strokes" as arrays of arrays. (Actually, arrays of objects containing arrays of coordinates.
     *
     * Stroke = mousedown + mousemoved * n (+ mouseup but we don't record that as that was the "end / lack of movement" indicator)
     *
     * Vectors = not classical vectors where numbers indicated shift relative last position. Our vectors are actually coordinates against top left of canvas.
     * 			we could calc the classical vectors, but keeping the the actual coordinates allows us (through Math.max / min)
     * 			to calc the size of resulting drawing very quickly. If we want classical vectors later, we can always get them in backend code.
     *
     * So, the data structure:
     *
     * var data = [
     * 	{ // stroke starts
     * 		x : [101, 98, 57, 43] // x points
     * 		, y : [1, 23, 65, 87] // y points
     * 	} // stroke ends
     * 	, { // stroke starts
     * 		x : [55, 56, 57, 58] // x points
     * 		, y : [101, 97, 54, 4] // y points
     * 	} // stroke ends
     * 	, { // stroke consisting of just a dot
     * 		x : [53] // x points
     * 		, y : [151] // y points
     * 	} // stroke ends
     * ]
     *
     * we don't care or store stroke width (it's canvas-size-relative), color, shadow values. These can be added / changed on whim post-capture.
     *
     */
    function DataEngine(storageObject, context, startStrokeFn, addToStrokeFn, endStrokeFn) {
        this.data = storageObject; // we expect this to be an instance of Array
        this.context = context;

        if (storageObject.length) {
            // we have data to render
            var numofstrokes = storageObject.length
                , stroke
                , numofpoints;

            for (var i = 0; i < numofstrokes; i++) {
                stroke = storageObject[i];
                numofpoints = stroke.x.length;
                startStrokeFn.call(context, stroke);
                for (var j = 1; j < numofpoints; j++) {
                    addToStrokeFn.call(context, stroke, j);
                }
                endStrokeFn.call(context, stroke);
            }
        }

        this.changed = function () {
        };

        this.startStrokeFn = startStrokeFn;
        this.addToStrokeFn = addToStrokeFn;
        this.endStrokeFn = endStrokeFn;

        this.inStroke = false;

        this._lastPoint = null;
        this._stroke = null;
        this.startStroke = function (point) {
            if (point && typeof (point.x) == "number" && typeof (point.y) == "number") {
                this._stroke = {'x': [point.x], 'y': [point.y]};
                this.data.push(this._stroke);
                this._lastPoint = point;
                this.inStroke = true;
                // 'this' does not work same inside setTimeout(
                var stroke = this._stroke
                    , fn = this.startStrokeFn
                    , context = this.context;
                setTimeout(
                    // some IE's don't support passing args per setTimeout API. Have to create closure every time instead.
                    function () {
                        fn.call(context, stroke)
                    }
                    , 3
                );
                return point;
            } else {
                return null;
            }
        };
        // that "5" at the very end of this if is important to explain.
        // we do NOT render links between two captured points (in the middle of the stroke) if the distance is shorter than that number.
        // not only do we NOT render it, we also do NOT capture (add) these intermediate points to storage.
        // when clustering of these is too tight, it produces noise on the line, which, because of smoothing, makes lines too curvy.
        // maybe, later, we can expose this as a configurable setting of some sort.
        this.addToStroke = function (point) {
            if (this.inStroke &&
                typeof (point.x) === "number" &&
                typeof (point.y) === "number" &&
                // calculates absolute shift in diagonal pixels away from original point
                (Math.abs(point.x - this._lastPoint.x) + Math.abs(point.y - this._lastPoint.y)) > 4
            ) {
                var positionInStroke = this._stroke.x.length;
                this._stroke.x.push(point.x);
                this._stroke.y.push(point.y);
                this._lastPoint = point;

                var stroke = this._stroke
                    , fn = this.addToStrokeFn
                    , context = this.context;
                setTimeout(
                    // some IE's don't support passing args per setTimeout API. Have to create closure every time instead.
                    function () {
                        fn.call(context, stroke, positionInStroke)
                    }
                    , 3
                );
                return point;
            } else {
                return null;
            }
        };
        this.endStroke = function () {
            var c = this.inStroke;
            this.inStroke = false;
            this._lastPoint = null;
            if (c) {
                var stroke = this._stroke
                    , fn = this.endStrokeFn // 'this' does not work same inside setTimeout(
                    , context = this.context
                    , changedfn = this.changed;
                setTimeout(
                    // some IE's don't support passing args per setTimeout API. Have to create closure every time instead.
                    function () {
                        fn.call(context, stroke);
                        changedfn.call(context);
                    }
                    , 3
                );
                return true;
            } else {
                return null;
            }
        };
    }

    var basicDot = function (ctx, x, y, size) {
        var fillStyle = ctx.fillStyle;
        ctx.fillStyle = ctx.strokeStyle;
        ctx.fillRect(x + size / -2, y + size / -2, size, size);
        ctx.fillStyle = fillStyle;
    }
        , basicLine = function (ctx, startx, starty, endx, endy) {
        ctx.beginPath();
        ctx.moveTo(startx, starty);
        ctx.lineTo(endx, endy);
        ctx.closePath();
        ctx.stroke();
    }
        , basicCurve = function (ctx, startx, starty, endx, endy, cp1x, cp1y, cp2x, cp2y) {
        ctx.beginPath();
        ctx.moveTo(startx, starty);
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, endx, endy);
        ctx.closePath();
        ctx.stroke();
    }
        , strokeStartCallback = function (stroke) {
        // this = jSignatureClass instance
        basicDot(this.canvasContext, stroke.x[0], stroke.y[0], this.settings.lineWidth);
    }
        , strokeAddCallback = function (stroke, positionInStroke) {
        // this = jSignatureClass instance

        // Because we are funky this way, here we draw TWO curves.
        // 1. POSSIBLY "this line" - spanning from point right before us, to this latest point.
        // 2. POSSIBLY "prior curve" - spanning from "latest point" to the one before it.

        // Why you ask?
        // long lines (ones with many pixels between them) do not look good when they are part of a large curvy stroke.
        // You know, the jaggedy crocodile spine instead of a pretty, smooth curve. Yuck!
        // We want to approximate pretty curves in-place of those ugly lines.
        // To approximate a very nice curve we need to know the direction of line before and after.
        // Hence, on long lines we actually wait for another point beyond it to come back from
        // mousemoved before we draw this curve.

        // So for "prior curve" to be calc'ed we need 4 points
        // 	A, B, C, D (we are on D now, A is 3 points in the past.)
        // and 3 lines:
        //  pre-line (from points A to B),
        //  this line (from points B to C), (we call it "this" because if it was not yet, it's the only one we can draw for sure.)
        //  post-line (from points C to D) (even through D point is 'current' we don't know how we can draw it yet)
        //
        // Well, actually, we don't need to *know* the point A, just the vector A->B
        var Cpoint = new Point(stroke.x[positionInStroke - 1], stroke.y[positionInStroke - 1])
            , Dpoint = new Point(stroke.x[positionInStroke], stroke.y[positionInStroke])
            , CDvector = Cpoint.getVectorToPoint(Dpoint);

        // Again, we have a chance here to draw TWO things:
        //  BC Curve (only if it's long, because if it was short, it was drawn by previous callback) and
        //  CD Line (only if it's short)

        // So, let's start with BC curve.
        // if there is only 2 points in stroke array, we don't have "history" long enough to have point B, let alone point A.
        // Falling through to drawing line CD is proper, as that's the only line we have points for.
        if (positionInStroke > 1) {
            // we are here when there are at least 3 points in stroke array.
            var Bpoint = new Point(stroke.x[positionInStroke - 2], stroke.y[positionInStroke - 2])
                , BCvector = Bpoint.getVectorToPoint(Cpoint)
                , ABvector;
            if (BCvector.getLength() > this.lineCurveThreshold) {
                // Yey! Pretty curves, here we come!
                if (positionInStroke > 2) {
                    // we are here when at least 4 points in stroke array.
                    ABvector = (new Point(stroke.x[positionInStroke - 3], stroke.y[positionInStroke - 3])).getVectorToPoint(Bpoint);
                } else {
                    ABvector = new Vector(0, 0);
                }

                var minlenfraction = 0.05
                    , maxlen = BCvector.getLength() * 0.35
                    , ABCangle = BCvector.angleTo(ABvector.reverse())
                    , BCDangle = CDvector.angleTo(BCvector.reverse())
                    , BCP1vector = new Vector(ABvector.x + BCvector.x, ABvector.y + BCvector.y).resizeTo(
                    Math.max(minlenfraction, ABCangle) * maxlen
                )
                    , CCP2vector = (new Vector(BCvector.x + CDvector.x, BCvector.y + CDvector.y)).reverse().resizeTo(
                    Math.max(minlenfraction, BCDangle) * maxlen
                );

                basicCurve(
                    this.canvasContext
                    , Bpoint.x
                    , Bpoint.y
                    , Cpoint.x
                    , Cpoint.y
                    , Bpoint.x + BCP1vector.x
                    , Bpoint.y + BCP1vector.y
                    , Cpoint.x + CCP2vector.x
                    , Cpoint.y + CCP2vector.y
                );
            }
        }
        if (CDvector.getLength() <= this.lineCurveThreshold) {
            basicLine(
                this.canvasContext
                , Cpoint.x
                , Cpoint.y
                , Dpoint.x
                , Dpoint.y
            );
        }
    }
        , strokeEndCallback = function (stroke) {
        // this = jSignatureClass instance

        // Here we tidy up things left unfinished in last strokeAddCallback run.

        // What's POTENTIALLY left unfinished there is the curve between the last points
        // in the stroke, if the len of that line is more than lineCurveThreshold
        // If the last line was shorter than lineCurveThreshold, it was drawn there, and there
        // is nothing for us here to do.
        // We can also be called when there is only one point in the stroke (meaning, the
        // stroke was just a dot), in which case, again, there is nothing for us to do.

        // So for "this curve" to be calc'ed we need 3 points
        // 	A, B, C
        // and 2 lines:
        //  pre-line (from points A to B),
        //  this line (from points B to C)
        // Well, actually, we don't need to *know* the point A, just the vector A->B
        // so, we really need points B, C and AB vector.
        var positionInStroke = stroke.x.length - 1;

        if (positionInStroke > 0) {
            // there are at least 2 points in the stroke.we are in business.
            var Cpoint = new Point(stroke.x[positionInStroke], stroke.y[positionInStroke])
                , Bpoint = new Point(stroke.x[positionInStroke - 1], stroke.y[positionInStroke - 1])
                , BCvector = Bpoint.getVectorToPoint(Cpoint)
                , ABvector;
            if (BCvector.getLength() > this.lineCurveThreshold) {
                // yep. This one was left undrawn in prior callback. Have to draw it now.
                if (positionInStroke > 1) {
                    // we have at least 3 elems in stroke
                    ABvector = (new Point(stroke.x[positionInStroke - 2], stroke.y[positionInStroke - 2])).getVectorToPoint(Bpoint);
                    var BCP1vector = new Vector(ABvector.x + BCvector.x, ABvector.y + BCvector.y).resizeTo(BCvector.getLength() / 2);
                    basicCurve(
                        this.canvasContext
                        , Bpoint.x
                        , Bpoint.y
                        , Cpoint.x
                        , Cpoint.y
                        , Bpoint.x + BCP1vector.x
                        , Bpoint.y + BCP1vector.y
                        , Cpoint.x
                        , Cpoint.y
                    );
                } else {
                    // Since there is no AB leg, there is no curve to draw. This line is still "long" but no curve.
                    basicLine(
                        this.canvasContext
                        , Bpoint.x
                        , Bpoint.y
                        , Cpoint.x
                        , Cpoint.y
                    );
                }
            }
        }
    }


    /*
    var getDataStats = function(){
        var strokecnt = strokes.length
            , stroke
            , pointid
            , pointcnt
            , x, y
            , maxX = Number.NEGATIVE_INFINITY
            , maxY = Number.NEGATIVE_INFINITY
            , minX = Number.POSITIVE_INFINITY
            , minY = Number.POSITIVE_INFINITY
        for(strokeid = 0; strokeid < strokecnt; strokeid++){
            stroke = strokes[strokeid]
            pointcnt = stroke.length
            for(pointid = 0; pointid < pointcnt; pointid++){
                x = stroke.x[pointid]
                y = stroke.y[pointid]
                if (x > maxX){
                    maxX = x
                } else if (x < minX) {
                    minX = x
                }
                if (y > maxY){
                    maxY = y
                } else if (y < minY) {
                    minY = y
                }
            }
        }
        return {'maxX': maxX, 'minX': minX, 'maxY': maxY, 'minY': minY}
    }
    */

    function conditionallyLinkCanvasResizeToWindowResize(jSignatureInstance, settingsWidth, apinamespace, globalEvents) {
        'use strict'
        if (settingsWidth === 'ratio' || settingsWidth.split('')[settingsWidth.length - 1] === '%') {

            this.eventTokens[apinamespace + '.parentresized'] = globalEvents.subscribe(
                apinamespace + '.parentresized'
                , (function (eventTokens, $parent, originalParentWidth, sizeRatio) {
                    'use strict'

                    return function () {
                        'use strict'

                        var w = $parent.width();
                        if (w !== originalParentWidth) {

                            // UNsubscribing this particular instance of signature pad only.
                            // there is a separate `eventTokens` per each instance of signature pad
                            for (var key in eventTokens) {
                                if (eventTokens.hasOwnProperty(key)) {
                                    globalEvents.unsubscribe(eventTokens[key]);
                                    delete eventTokens[key];
                                }
                            }

                            var settings = jSignatureInstance.settings;
                            jSignatureInstance.$parent.children().remove();
                            for (var key in jSignatureInstance) {
                                if (jSignatureInstance.hasOwnProperty(key)) {
                                    delete jSignatureInstance[key];
                                }
                            }

                            // scale data to new signature pad size
                            settings.data = (function (data, scale) {
                                var newData = [];
                                var o, i, l, j, m, stroke;
                                for (i = 0, l = data.length; i < l; i++) {
                                    stroke = data[i];

                                    o = {'x': [], 'y': []};

                                    for (j = 0, m = stroke.x.length; j < m; j++) {
                                        o.x.push(stroke.x[j] * scale);
                                        o.y.push(stroke.y[j] * scale);
                                    }

                                    newData.push(o);
                                }
                                return newData;
                            })(
                                settings.data
                                , w * 1.0 / originalParentWidth
                            )

                            $parent[apinamespace](settings);
                        }
                    }
                })(
                    this.eventTokens
                    , this.$parent
                    , this.$parent.width()
                    , this.canvas.width * 1.0 / this.canvas.height
                )
            )
        }
    };


    function jSignatureClass(parent, options, instanceExtensions) {

        var $parent = this.$parent = $(parent)
            , eventTokens = this.eventTokens = {}
            , events = this.events = new PubSubClass(this)
            , globalEvents = $.fn[apinamespace]('globalEvents')
            , settings = {
            'width': 'ratio'
            , 'height': 'ratio'
            , 'sizeRatio': 4 // only used when height = 'ratio'
            , 'color': '#000'
            , 'background-color': '#fff'
            , 'decor-color': '#eee'
            , 'lineWidth': 0
            , 'minFatFingerCompensation': -10
            , 'showUndoButton': false
            , 'readOnly': false
            , 'data': []
            , 'signatureLine': false
        };

        $.extend(settings, getColors($parent));
        if (options) {
            $.extend(settings, options);
        }
        this.settings = settings;

        for (var extensionName in instanceExtensions) {
            if (instanceExtensions.hasOwnProperty(extensionName)) {
                instanceExtensions[extensionName].call(this, extensionName);
            }
        }

        this.events.publish(apinamespace + '.initializing');

        // these, when enabled, will hover above the sig area. Hence we append them to DOM before canvas.
        this.$controlbarUpper = (function () {
            var controlbarstyle = 'padding:0 !important; margin:0 !important;' +
                'width: 100% !important; height: 0 !important; -ms-touch-action: none; touch-action: none;' +
                'margin-top:-1em !important; margin-bottom:1em !important;';
            return $('<div style="' + controlbarstyle + '"></div>').appendTo($parent);
        })();

        this.isCanvasEmulator = false; // will be flipped by initializer when needed.
        var canvas = this.canvas = this.initializeCanvas(settings)
            , $canvas = $(canvas);

        this.$controlbarLower = (function () {
            var controlbarstyle = 'padding:0 !important; margin:0 !important;' +
                'width: 100% !important; height: 0 !important; -ms-touch-action: none; touch-action: none;' +
                'margin-top:-1.5em !important; margin-bottom:1.5em !important; position: relative;';
            return $('<div style="' + controlbarstyle + '"></div>').appendTo($parent);
        })();

        this.canvasContext = canvas.getContext("2d");

        // Most of our exposed API will be looking for this:
        $canvas.data(apinamespace + '.this', this);

        settings.lineWidth = (function (defaultLineWidth, canvasWidth) {
            if (!defaultLineWidth) {
                return Math.max(
                    Math.round(canvasWidth / 400) /*+1 pixel for every extra 300px of width.*/
                    , 2 /* minimum line width */
                );
            } else {
                return defaultLineWidth;
            }
        })(settings.lineWidth, canvas.width);

        this.lineCurveThreshold = settings.lineWidth * 3;

        // Add custom class if defined
        if (settings.cssclass && $.trim(settings.cssclass) != "") {
            $canvas.addClass(settings.cssclass);
        }

        // used for shifting the drawing point up on touch devices, so one can see the drawing above the finger.
        this.fatFingerCompensation = 0;

        var movementHandlers = (function (jSignatureInstance) {

                //================================
                // mouse down, move, up handlers:

                // shifts - adjustment values in viewport pixels drived from position of canvas on the page
                var shiftX
                    , shiftY
                    , setStartValues = function () {
                    var tos = $(jSignatureInstance.canvas).offset()
                    shiftX = tos.left * -1
                    shiftY = tos.top * -1
                }
                    , getPointFromEvent = function (e) {
                    var firstEvent = (e.changedTouches && e.changedTouches.length > 0 ? e.changedTouches[0] : e);
                    // All devices i tried report correct coordinates in pageX,Y
                    // Android Chrome 2.3.x, 3.1, 3.2., Opera Mobile,  safari iOS 4.x,
                    // Windows: Chrome, FF, IE9, Safari
                    // None of that scroll shift calc vs screenXY other sigs do is needed.
                    // ... oh, yeah, the "fatFinger.." is for tablets so that people see what they draw.
                    return new Point(
                        Math.round(firstEvent.pageX + shiftX)
                        , Math.round(firstEvent.pageY + shiftY) + jSignatureInstance.fatFingerCompensation
                    );
                }
                    , timer = new KickTimerClass(
                    750
                    , function () {
                        jSignatureInstance.dataEngine.endStroke();
                    }
                );

                this.drawEndHandler = function (e) {
                    if (!jSignatureInstance.settings.readOnly) {
                        try {
                            e.preventDefault();
                        } catch (ex) {
                        }
                        timer.clear();
                        jSignatureInstance.dataEngine.endStroke();
                    }
                };
                this.drawStartHandler = function (e) {
                    if (!jSignatureInstance.settings.readOnly) {
                        e.preventDefault();
                        // for performance we cache the offsets
                        // we recalc these only at the beginning the stroke
                        setStartValues();
                        jSignatureInstance.dataEngine.startStroke(getPointFromEvent(e));
                        timer.kick();
                    }
                };
                this.drawMoveHandler = function (e) {
                    if (!jSignatureInstance.settings.readOnly) {
                        e.preventDefault();
                        if (!jSignatureInstance.dataEngine.inStroke) {
                            return;
                        }
                        jSignatureInstance.dataEngine.addToStroke(getPointFromEvent(e));
                        timer.kick();
                    }
                };

                return this;

            }).call({}, this)

            //
            //================================

        ;(function (drawEndHandler, drawStartHandler, drawMoveHandler) {
            var canvas = this.canvas
                , $canvas = $(canvas)
                , undef;
            if (this.isCanvasEmulator) {
                $canvas.bind('mousemove.' + apinamespace, drawMoveHandler);
                $canvas.bind('mouseup.' + apinamespace, drawEndHandler);
                $canvas.bind('mousedown.' + apinamespace, drawStartHandler);
            } else {
                canvas.ontouchstart = function (e) {
                    canvas.onmousedown = canvas.onmouseup = canvas.onmousemove = undef;

                    this.fatFingerCompensation = (
                        settings.minFatFingerCompensation &&
                        settings.lineWidth * -3 > settings.minFatFingerCompensation
                    ) ? settings.lineWidth * -3 : settings.minFatFingerCompensation;

                    drawStartHandler(e);

                    canvas.ontouchend = drawEndHandler;
                    canvas.ontouchstart = drawStartHandler;
                    canvas.ontouchmove = drawMoveHandler;
                };
                canvas.onmousedown = function (e) {
                    canvas.ontouchstart = canvas.ontouchend = canvas.ontouchmove = undef;

                    drawStartHandler(e);

                    canvas.onmousedown = drawStartHandler;
                    canvas.onmouseup = drawEndHandler;
                    canvas.onmousemove = drawMoveHandler;
                }
                if (window.navigator.msPointerEnabled) {
                    canvas.onmspointerdown = drawStartHandler;
                    canvas.onmspointerup = drawEndHandler;
                    canvas.onmspointermove = drawMoveHandler;
                }
            }
        }).call(
            this
            , movementHandlers.drawEndHandler
            , movementHandlers.drawStartHandler
            , movementHandlers.drawMoveHandler
        )

        //=========================================
        // various event handlers

        // on mouseout + mouseup canvas did not know that mouseUP fired. Continued to draw despite mouse UP.
        // it is bettr than
        // $canvas.bind('mouseout', drawEndHandler)
        // because we don't want to break the stroke where user accidentally gets ouside and wants to get back in quickly.
        eventTokens[apinamespace + '.windowmouseup'] = globalEvents.subscribe(
            apinamespace + '.windowmouseup'
            , movementHandlers.drawEndHandler
        );

        this.events.publish(apinamespace + '.attachingEventHandlers');

        // If we have proportional width, we sign up to events broadcasting "window resized" and checking if
        // parent's width changed. If so, we (1) extract settings + data from current signature pad,
        // (2) remove signature pad from parent, and (3) reinit new signature pad at new size with same settings, (rescaled) data.
        conditionallyLinkCanvasResizeToWindowResize.call(
            this
            , this
            , settings.width.toString(10)
            , apinamespace, globalEvents
        );

        // end of event handlers.
        // ===============================

        this.resetCanvas(settings.data);

        // resetCanvas renders the data on the screen and fires ONE "change" event
        // if there is data. If you have controls that rely on "change" firing
        // attach them to something that runs before this.resetCanvas, like
        // apinamespace+'.attachingEventHandlers' that fires a bit higher.
        this.events.publish(apinamespace + '.initialized');

        return this;
    } // end of initBase

//=========================================================================
// jSignatureClass's methods and supporting fn's

    jSignatureClass.prototype.resetCanvas = function (data, dontClear) {
        var canvas = this.canvas
            , settings = this.settings
            , ctx = this.canvasContext
            , isCanvasEmulator = this.isCanvasEmulator
            , cw = canvas.width
            , ch = canvas.height;

        // preparing colors, drawing area
        if (!dontClear) {
            ctx.clearRect(0, 0, cw + 30, ch + 30);
        }

        ctx.shadowColor = ctx.fillStyle = settings['background-color']
        if (isCanvasEmulator) {
            // FLashCanvas fills with Black by default, covering up the parent div's background
            // hence we refill
            ctx.fillRect(0, 0, cw + 30, ch + 30);
        }

        ctx.lineWidth = Math.ceil(parseInt(settings.lineWidth, 10));
        ctx.lineCap = ctx.lineJoin = "round";

        // signature line
        if (settings.signatureLine) {
            if (null != settings['decor-color']) {
                ctx.strokeStyle = settings['decor-color'];
                ctx.shadowOffsetX = 0;
                ctx.shadowOffsetY = 0;
                var lineoffset = Math.round(ch / 5);
                basicLine(ctx, lineoffset * 1.5, ch - lineoffset, cw - (lineoffset * 1.5), ch - lineoffset);
            }

            if (!isCanvasEmulator) {
                ctx.shadowColor = ctx.strokeStyle;
                ctx.shadowOffsetX = ctx.lineWidth * 0.5;
                ctx.shadowOffsetY = ctx.lineWidth * -0.6;
                ctx.shadowBlur = 0;
            }
        }

        ctx.strokeStyle = settings.color;

        // setting up new dataEngine

        if (!data) {
            data = [];
        }

        var dataEngine = this.dataEngine = new DataEngine(
            data
            , this
            , strokeStartCallback
            , strokeAddCallback
            , strokeEndCallback
        );

        settings.data = data; // onwindowresize handler uses it, i think.
        $(canvas).data(apinamespace + '.data', data)
            .data(apinamespace + '.settings', settings);

        // we fire "change" event on every change in data.
        // setting this up:
        dataEngine.changed = (function (target, events, apinamespace) {
            'use strict'
            return function () {
                events.publish(apinamespace + '.change');
                target.trigger('change');
            }
        })(this.$parent, this.events, apinamespace);
        // let's trigger change on all data reloads
        dataEngine.changed();

        // import filters will be passing this back as indication of "we rendered"
        return true;
    };

    function initializeCanvasEmulator(canvas) {
        if (canvas.getContext) {
            return false;
        } else {
            // for cases when jSignature, FlashCanvas is inserted
            // from one window into another (child iframe)
            // 'window' and 'FlashCanvas' may be stuck behind
            // in that other parent window.
            // we need to find it
            var window = canvas.ownerDocument.parentWindow;
            var FC = window.FlashCanvas ?
                canvas.ownerDocument.parentWindow.FlashCanvas :
                (
                    typeof FlashCanvas === "undefined" ?
                        undefined :
                        FlashCanvas
                );

            if (FC) {
                canvas = FC.initElement(canvas);

                var zoom = 1;
                // FlashCanvas uses flash which has this annoying habit of NOT scaling with page zoom.
                // It matches pixel-to-pixel to screen instead.
                // Since we are targeting ONLY IE 7, 8 with FlashCanvas, we will test the zoom only the IE8, IE7 way
                if (window && window.screen && window.screen.deviceXDPI && window.screen.logicalXDPI) {
                    zoom = window.screen.deviceXDPI * 1.0 / window.screen.logicalXDPI;
                }
                if (zoom !== 1) {
                    try {
                        // We effectively abuse the brokenness of FlashCanvas and force the flash rendering surface to
                        // occupy larger pixel dimensions than the wrapping, scaled up DIV and Canvas elems.
                        $(canvas).children('object').get(0).resize(Math.ceil(canvas.width * zoom), Math.ceil(canvas.height * zoom));
                        // And by applying "scale" transformation we can talk "browser pixels" to FlashCanvas
                        // and have it translate the "browser pixels" to "screen pixels"
                        canvas.getContext('2d').scale(zoom, zoom);
                        // Note to self: don't reuse Canvas element. Repeated "scale" are cumulative.
                    } catch (ex) {
                    }
                }
                return true;
            } else {
                throw new Error("Canvas element does not support 2d context. jSignature cannot proceed.");
            }
        }

    }

    jSignatureClass.prototype.initializeCanvas = function (settings) {
        // ===========
        // Init + Sizing code

        var canvas = document.createElement('canvas')
            , $canvas = $(canvas);

        // We cannot work with circular dependency
        if (settings.width === settings.height && settings.height === 'ratio') {
            settings.width = '100%';
        }

        $canvas.css(
            {
                'margin': 0,
                'padding': 0,
                'border': 'none',
                'height': settings.height === 'ratio' || !settings.height ? 1 : settings.height.toString(10),
                'width': settings.width === 'ratio' || !settings.width ? 1 : settings.width.toString(10),
                '-ms-touch-action': 'none',
                'touch-action': 'none',
                'background-color': settings['background-color']
            }
        );

        $canvas.appendTo(this.$parent);

        // we could not do this until canvas is rendered (appended to DOM)
        if (settings.height === 'ratio') {
            $canvas.css(
                'height'
                , Math.round($canvas.width() / settings.sizeRatio)
            );
        } else if (settings.width === 'ratio') {
            $canvas.css(
                'width'
                , Math.round($canvas.height() * settings.sizeRatio)
            );
        }

        $canvas.addClass(apinamespace);

        // canvas's drawing area resolution is independent from canvas's size.
        // pixels are just scaled up or down when internal resolution does not
        // match external size. So...

        canvas.width = $canvas.width();
        canvas.height = $canvas.height();

        // Special case Sizing code

        this.isCanvasEmulator = initializeCanvasEmulator(canvas);

        // End of Sizing Code
        // ===========

        // normally select preventer would be short, but
        // Canvas emulator on IE does NOT provide value for Event. Hence this convoluted line.
        canvas.onselectstart = function (e) {
            if (e && e.preventDefault) {
                e.preventDefault()
            }
            ;
            if (e && e.stopPropagation) {
                e.stopPropagation()
            }
            ;
            return false;
        };

        return canvas;
    }


    var GlobalJSignatureObjectInitializer = function (window) {

        var globalEvents = new PubSubClass();

        // common "window resized" event listener.
        // jSignature instances will subscribe to this chanel.
        // to resize themselves when needed.
        ;(function (globalEvents, apinamespace, $, window) {
            'use strict'

            var resizetimer
                , runner = function () {
                globalEvents.publish(
                    apinamespace + '.parentresized'
                )
            };

            // jSignature knows how to resize its content when its parent is resized
            // window resize is the only way we can catch resize events though...
            $(window).bind('resize.' + apinamespace, function () {
                if (resizetimer) {
                    clearTimeout(resizetimer);
                }
                resizetimer = setTimeout(
                    runner
                    , 500
                );
            })
                // when mouse exists canvas element and "up"s outside, we cannot catch it with
                // callbacks attached to canvas. This catches it outside.
                .bind('mouseup.' + apinamespace, function (e) {
                    globalEvents.publish(
                        apinamespace + '.windowmouseup'
                    )
                });

        })(globalEvents, apinamespace, $, window)

        var jSignatureInstanceExtensions = {
            /*
            'exampleExtension':function(extensionName){
                // we are called very early in instance's life.
                // right after the settings are resolved and
                // jSignatureInstance.events is created
                // and right before first ("jSignature.initializing") event is called.
                // You don't really need to manupilate
                // jSignatureInstance directly, just attach
                // a bunch of events to jSignatureInstance.events
                // (look at the source of jSignatureClass to see when these fire)
                // and your special pieces of code will attach by themselves.

                // this function runs every time a new instance is set up.
                // this means every var you create will live only for one instance
                // unless you attach it to something outside, like "window."
                // and pick it up later from there.

                // when globalEvents' events fire, 'this' is globalEvents object
                // when jSignatureInstance's events fire, 'this' is jSignatureInstance

                // Here,
                // this = is new jSignatureClass's instance.

                // The way you COULD approch setting this up is:
                // if you have multistep set up, attach event to "jSignature.initializing"
                // that attaches other events to be fired further lower the init stream.
                // Or, if you know for sure you rely on only one jSignatureInstance's event,
                // just attach to it directly

                this.events.subscribe(
                    // name of the event
                    apinamespace + '.initializing'
                    // event handlers, can pass args too, but in majority of cases,
                    // 'this' which is jSignatureClass object instance pointer is enough to get by.
                    , function(){
                        if (this.settings.hasOwnProperty('non-existent setting category?')) {
                            console.log(extensionName + ' is here')
                        }
                    }
                )
            }
            */
        };

        var exportplugins = {
            'default': function (data) {
                return this.toDataURL()
            }
            , 'native': function (data) {
                return data
            }
            , 'image': function (data) {
                /*this = canvas elem */
                var imagestring = this.toDataURL();

                if (typeof imagestring === 'string' &&
                    imagestring.length > 4 &&
                    imagestring.slice(0, 5) === 'data:' &&
                    imagestring.indexOf(',') !== -1) {

                    var splitterpos = imagestring.indexOf(',');

                    return [
                        imagestring.slice(5, splitterpos)
                        , imagestring.substr(splitterpos + 1)
                    ];
                }
                return [];
            }
        };

        // will be part of "importplugins"
        function _renderImageOnCanvas(data, formattype, rerendercallable) {
            'use strict'
            // #1. Do NOT rely on this. No worky on IE
            //   (url max len + lack of base64 decoder + possibly other issues)
            // #2. This does NOT affect what is captured as "signature" as far as vector data is
            // concerned. This is treated same as "signature line" - i.e. completely ignored
            // the only time you see imported image data exported is if you export as image.

            // we do NOT call rerendercallable here (unlike in other import plugins)
            // because importing image does absolutely nothing to the underlying vector data storage
            // This could be a way to "import" old signatures stored as images
            // This could also be a way to import extra decor into signature area.

            var img = new Image()
                // this = Canvas DOM elem. Not jQuery object. Not Canvas's parent div.
                , c = this;

            img.onload = function () {
                var ctx = c.getContext("2d");
                var oldShadowColor = ctx.shadowColor;
                ctx.shadowColor = "transparent";
                ctx.drawImage(
                    img, 0, 0
                    , (img.width < c.width) ? img.width : c.width
                    , (img.height < c.height) ? img.height : c.height
                );
                ctx.shadowColor = oldShadowColor;
            };

            img.src = 'data:' + formattype + ',' + data;
        }

        var importplugins = {
            'native': function (data, formattype, rerendercallable) {
                // we expect data as Array of objects of arrays here - whatever 'default' EXPORT plugin spits out.
                // returning Truthy to indicate we are good, all updated.
                rerendercallable(data);
            }
            , 'image': _renderImageOnCanvas
            , 'image/png;base64': _renderImageOnCanvas
            , 'image/jpeg;base64': _renderImageOnCanvas
            , 'image/jpg;base64': _renderImageOnCanvas
        };

        function _clearDrawingArea(data, dontClear) {
            this.find('canvas.' + apinamespace)
                .add(this.filter('canvas.' + apinamespace))
                .data(apinamespace + '.this').resetCanvas(data, dontClear);
            return this;
        }

        function _setDrawingData(data, formattype) {
            var undef;

            if (formattype === undef && typeof data === 'string' && data.substr(0, 5) === 'data:') {
                formattype = data.slice(5).split(',')[0];
                // 5 chars of "data:" + mimetype len + 1 "," char = all skipped.
                data = data.slice(6 + formattype.length);
                if (formattype === data) {
                    return;
                }
            }

            var $canvas = this.find('canvas.' + apinamespace).add(this.filter('canvas.' + apinamespace));

            if (!importplugins.hasOwnProperty(formattype)) {
                throw new Error(apinamespace + " is unable to find import plugin with for format '" + String(formattype) + "'");
            } else if ($canvas.length !== 0) {
                importplugins[formattype].call(
                    $canvas[0]
                    , data
                    , formattype
                    , (function (jSignatureInstance) {
                        return function () {
                            return jSignatureInstance.resetCanvas.apply(jSignatureInstance, arguments)
                        }
                    })($canvas.data(apinamespace + '.this'))
                );
            }

            return this;
        }

        var elementIsOrphan = function (e) {
            var topOfDOM = false;
            e = e.parentNode;
            while (e && !topOfDOM) {
                topOfDOM = e.body;
                e = e.parentNode;
            }
            return !topOfDOM;
        }

        //These are exposed as methods under $obj.jSignature('methodname', *args)
        var plugins = {'export': exportplugins, 'import': importplugins, 'instance': jSignatureInstanceExtensions}
            , methods = {
            'init': function (options) {
                return this.each(function () {
                    if (!elementIsOrphan(this)) {
                        new jSignatureClass(this, options, jSignatureInstanceExtensions);
                    }
                })
            }
            , 'destroy': function () {
                return this.each(function () {
                    if (!elementIsOrphan(this)) {
                        var sig = $(this).find('canvas').data(apinamespace + '.this');
                        if (sig) {
                            sig.$controlbarLower.remove();
                            sig.$controlbarUpper.remove();
                            $(sig.canvas).remove();
                        }
                    }
                });
            }
            , 'getSettings': function () {
                return this.find('canvas.' + apinamespace)
                    .add(this.filter('canvas.' + apinamespace))
                    .data(apinamespace + '.this').settings;
            }
            , 'isModified': function () {
                return this.find('canvas.' + apinamespace)
                    .add(this.filter('canvas.' + apinamespace))
                    .data(apinamespace + '.this')
                    .dataEngine
                    ._stroke !== null;
            }
            , 'updateSetting': function (param, val, forFuture) {
                var $canvas = this.find('canvas.' + apinamespace)
                    .add(this.filter('canvas.' + apinamespace))
                    .data(apinamespace + '.this');
                $canvas.settings[param] = val;
                $canvas.resetCanvas((forFuture ? null : $canvas.settings.data), true);
                return $canvas.settings[param];
            }
            // around since v1
            , 'clear': _clearDrawingArea
            // was mistakenly introduced instead of 'clear' in v2
            , 'reset': _clearDrawingArea
            , 'addPlugin': function (pluginType, pluginName, callable) {
                if (plugins.hasOwnProperty(pluginType)) {
                    plugins[pluginType][pluginName] = callable;
                }
                return this;
            }
            , 'listPlugins': function (pluginType) {
                var answer = [];
                if (plugins.hasOwnProperty(pluginType)) {
                    var o = plugins[pluginType];
                    for (var k in o) {
                        if (o.hasOwnProperty(k)) {
                            answer.push(k);
                        }
                    }
                }
                return answer;
            }
            , 'getData': function (formattype) {
                var undef, $canvas = this.find('canvas.' + apinamespace).add(this.filter('canvas.' + apinamespace));
                if (formattype === undef) {
                    formattype = 'default';
                }
                if ($canvas.length !== 0 && exportplugins.hasOwnProperty(formattype)) {
                    return exportplugins[formattype].call(
                        $canvas.get(0) // canvas dom elem
                        , $canvas.data(apinamespace + '.data') // raw signature data as array of objects of arrays
                        , $canvas.data(apinamespace + '.settings')
                    );
                }
            }
            // around since v1. Took only one arg - data-url-formatted string with (likely png of) signature image
            , 'importData': _setDrawingData
            // was mistakenly introduced instead of 'importData' in v2
            , 'setData': _setDrawingData
            // this is one and same instance for all jSignature.
            , 'globalEvents': function () {
                return globalEvents
            }
            , 'disable': function () {
                this.find("input").attr("disabled", 1);
                this.find('canvas.' + apinamespace)
                    .addClass("disabled")
                    .data(apinamespace + '.this')
                    .settings
                    .readOnly = true;
            }
            , 'enable': function () {
                this.find("input").removeAttr("disabled");
                this.find('canvas.' + apinamespace)
                    .removeClass("disabled")
                    .data(apinamespace + '.this')
                    .settings
                    .readOnly = false;
            }
            // there will be a separate one for each jSignature instance.
            , 'events': function () {
                return this.find('canvas.' + apinamespace)
                    .add(this.filter('canvas.' + apinamespace))
                    .data(apinamespace + '.this').events;
            }
        } // end of methods declaration.

        $.fn[apinamespace] = function (method) {
            'use strict'
            if (!method || typeof method === 'object') {
                return methods.init.apply(this, arguments);
            } else if (typeof method === 'string' && methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else {
                $.error('Method ' + String(method) + ' does not exist on jQuery.' + apinamespace);
            }
        }

    } // end of GlobalJSignatureObjectInitializer

    GlobalJSignatureObjectInitializer(window)

})();
